<template>
  <div>
    <div class="demo-input-suffix">
      <span class="form-input-label">课程章节：</span>
      <div class="el-tree-div">
        <el-button
                type="text"
                size="mini"
                @click="append(1)">
                添加章节
          </el-button>
        <el-tree
          :data="chapters"
          props="{id, parent, chapter_name, children}"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false">
          
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span @click="modify(data)">{{data.chapter_name}} &nbsp;&nbsp;</span>
            <span>
              <el-button
                type="text"
                size="mini"
                @click="() => goEdit(data.id)">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => append(data)">
                <i class="el-icon-circle-plus-outline"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(data)">
                <i class="el-icon-remove-outline"></i>
              </el-button>
            </span>
          </span>
        </el-tree>
        <el-dialog title="编辑章节" :modal="false" :visible.sync="showEditChapter">
          <el-input type="text" v-model="activeNode.chapter_name" ></el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showEditChapter = false">取 消</el-button>
            <el-button type="primary" @click="editChapterSubmit">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {courseModel} from '@/api/models'
import {Message} from 'element-ui'
export default {
  props: {
    chapters: {
      type: Array,
      default: null
    },
    course_id: {
      type: [Number, String], 
      default: null
    }
  },
  data() {
    return {
      showEditChapter: false,
      activeNode: {},
      editAction: 1
    }
  },
  methods: {

    goEdit(id) {
      console.log(id);
      this.$router.push('/editChapter/' + id);
    },

    modify(data) {
      this.activeNode = data
      this.showEditChapter = true;
      this.editAction = 3
    },

    editChapterSubmit(){
      this.showEditChapter = false; 
      courseModel.chapterAdd({
        chapter_id: this.activeNode.id || 0,
        course_id: this.course_id,
        chapter_name: this.activeNode.chapter_name,
        action: this.editAction
      }, res => {
        Message.success(res.message);
        this.fetchChapter();
      }, err => {
        Message.warning(err.message);
      })
    },

    append(data) {
      console.log('append', data)
      if(data == 1) {
        this.activeNode = {
          id: 0,
          chapter_name: null
        }
      }else{
        this.activeNode = {
          id: data.id,
          chapter_name: null
        }
      }
      this.editAction = 1;
      this.showEditChapter = true; 
    },

    remove(data) {
       courseModel.chapterAdd({
        chapter_id: data.id|| 0,
        course_id: this.course_id,
        action: 2
      }, res => {
        Message.success(res.message);
        this.fetchChapter();
      }, err => {
        Message.warning(err.message);
      })     
    },

    fetchChapter() {
      this.$emit('fetchChapter')
    }

  }
}
</script>

<style>

</style>